// 页面一
.banner{
    background: transparent;

    #background{
        position: absolute;
        width: 130em;
        top: 0;
        right: 0;
        z-index: -100;
        img{
            width: 100%;
        }
    }
    .box{
        text-align: center;
        padding-top: 7em;
        padding-bottom: 3em;

        .headling{
            font-family: OSLight;
            font-size: 32px;
            text-transform: uppercase;
            color: #909090;

            span{
                font-family: OSBold;
                color: #fcac45;
            }
        }

        .detext{
            font-size:13px;
            color: #acacac;
            margin-top: 1em;

            span{
                font-family: OSBold;
                color: #c3c3c3;
            }
        }
        
        .btndown{
            padding-bottom: 8em;
            a{
                width: 46px;
                height: 46px;
                border: 2px solid #3d3d3d;
                border-radius: 100%;
                text-align: center;
                line-height: 40px;
                margin-top: 20em;
                color: #3d3d3d;
                transition: all linear .3s;

                &:hover{
                    box-shadow: 0px 0px 5px 2px #3d3d3d;
                    transform: translateY(-10px);
                }
            }

            
        }

    }

    @media screen and (max-width: 768px) {
        .box{
            padding-top: 6.5em;
            .headling{
                font-size: 28px;
            }
            .btndown{
                a{
                    margin-top: 18em;
                }
            }
        }
    }
    @media screen and (max-width: 400px) {
        .box{
            padding-top: 6em;
            .headling{
                font-size: 22px;
            }
            .detext{
                font-size:11px;
            }
            .btndown{
                a{
                    margin-top: 16em;
                }
            }
        }
    }
}

// 页面二
.about{
    background-color: #fff;
    padding-top: 10em;
    // display: flex;
    .left{
        // flex-shrink: 0;
        margin-left: -2em;
        img{
            max-width: 100%;
            max-height: 100%;
        }
    }
    .right{
        margin-left: -6em;

        .info{
            text-transform: uppercase;
            margin-bottom: 1em;
            .short{
                font-size: 1em;
                color: #787878;
                display: inline-block;
            }
            .title{
                font-size: 25px;
                margin-bottom: 0.8em;
                & span:first-child{
                    display: inline-block;
                    height: 2.5em;
                    line-height: 2.5em;
                    border-bottom: 3px solid #fcac45;
                }
                & span:last-child{
                    font-family: OSBold;
                    font-weight: 800;
                }
            }
        }
        .content{
            font-size: 14px;
            color: #787878;
            margin-bottom: 2em;
        }
        .newlist{
            li{
                span{
                    font-size: 10px;
                }
                
                & span:nth-of-type(2){
                    margin-bottom: 1.5em;
                    font-family: OSBold;

                }
                & span:nth-of-type(3){
                    font-family: OSltalic;
                }
            }
        }
        .button{
            width: 198px;
            height: 48px;
            border: 1px solid #787878;
            border-radius: 3px;
            text-align: center;
            line-height: 48px;
            padding: 0;
            margin-top: 2em;
            cursor: pointer;
            transition: all linear .3s;
            margin-bottom: 5em;
            &:hover{
                transform: translateY(-10px);
                box-shadow: 0px 0px 6px 1px #787878;
            }

            span{
                img{
                    margin-left: -0.5em;
                    margin-bottom: 2px;
                }
            }
            a{
                color: #787878;
                margin-left: 0.5em;
            }
        }
    }




    @media screen and (max-width: 1198px) {
        .left{
            margin-left: 0em;
        }
        .right{
            margin-left: 0em;
        }
    }

    @media screen and (max-width: 789px) {
        .left{
            margin-left: 0em;
        }
        .right{
            margin-left: 0em;
            .info{
                .title{
                    font-size: 18px;
                }
            }
        }
    }

    @media screen and (max-width: 400px) {
        .left{
            margin-left: 0em;
            margin-top: -5em;
        }
        .right{
            margin-left: 0em;
            .info{
                .short{
                    font-size: 0.8em;
                }
                .title{
                    font-size: 16px;
                    & span:first-child{
                        border-width: 2px;
                    }
                    & span:last-child{
                        font-size: 19px;
                    }
                }
            }
            .content{
                font-size: 12px;
            }
            .newlist{
                li{
                    span{
                        font-size: 11px;
                    }
                    & span:nth-of-type(1){
                        font-size: 13px;
                    }
                }
            }
            .button{
                width: 165px;
                height: 40px;
                line-height: 40px;
                span{
                    img{
                        width: 10px;
                        height: 10px;
                        margin-bottom: 2px;
                    }
                }
                a{
                    font-size: 12px;
                    margin-left: 0.5em;
                }
            }
        }
    }
}

// 页面三
.team{
    background-color: #070707;
    text-align: center;
    padding: 5em 0 2em;
    .subject{
        font-size: 3em;
        text-transform: uppercase;
        color: #fff;
        font-family: OSLight;
        word-spacing: 3px;
        background: url("../images/team_title_bg.png") no-repeat center bottom;
        line-height:3em;
        margin-bottom: 1em;

        span{
            font-family: OSBold;
        }
    }
    
    input{
        display: none;
    }
    input:checked+ .list {
        display: flex;
    }
    input[id="pic"]:checked~ .more label:nth-child(1) {
        background-color: #fcac45;
    }
    input[id="pic1"]:checked~ .more label:nth-child(2) {
        background-color: #fcac45;
    }
    input[id="pic2"]:checked~ .more label:nth-child(3) {
        background-color: #fcac45;
    }

    .list{
        display: flex;
        justify-content: space-between;
        margin-bottom: 5em;
        display: none;
        .item{
            width: 23%;
            .thumb{
                width: 8em;
                height: 8em;
                border-radius: 100%;
                overflow: hidden;
                margin: 0 auto;
                margin-bottom: 2em;
                .imgs1{
                    img{
                        width: 100%;
                        height: 100%;
                    }
                    
                }
                .imgs2{
                    img{
                        width: 100%;
                        height: 100%;
                    }
                    
                }
            }
            .content{
                color: #dedede;
                font-family: OSLight;
                .texts{
                    color: #ffffff;
                    font-family: OSBold;
                    font-size: 1em;
                }
                .info{
                    font-size: 0.7em;
                    margin-bottom: 2em;
                }
                .desc{
                    font-size: 0.7em;
                }
            }
        }
    }
    .more{
        width: 100%;
        text-align: center;
        label{
            display: inline-block;
            width: 0.7em;
            height: 0.7em;
            cursor: pointer;
            background-color: #fff;
            transition: all linear 0.3s;
            &:hover{
                background-color: #fcac45;
            }
        }

        
    }

    @media screen and (max-width:600px){
        padding: 2em 0 2em;
        .subject{
            font-size: 2.5em;
            
        }
        input:checked+ .list {
            display: block;
        }
        .list{
            display: block;
            text-align: left;
            display: none;
            
            .item{
                width: 100%;
                display: flex;
                margin-bottom: 2em;
                .thumb{
                    flex-shrink: 0;
                    margin: 0;
                    margin-right: 2em;
                    width: 7em;
                    height: 7em;
                    border-radius: 10px;
                }
                
                .content{      

                    .texts{
                        margin-bottom: 1em;
                    }
                }
            }
        }
    }
}

// 页面四
.teamsec{
    text-align: center;
    padding: 5em 0 5em;
    .subject2{
        text-transform: uppercase;
        font-family: OSLight;
        font-size: 3em;
        background: url("../images/team_title_bg.png") no-repeat center bottom;
        line-height:3em;
        margin-bottom: 2em;
        span{
            font-family: OSBold;
        }
    }

    .detext2{
        font-size: 9px;
        margin-top: -5em;
        margin-bottom: 10em;
    }

    .list2{
        display: flex;
        justify-content: space-between;
        .item2{
            width: 23%;
            .thumb2{
                width: 6em;
                height: 6em;
                margin: 0 auto;
                border: 3px solid #fcac45;
                border-radius: 100%;
                margin-bottom: 1em;
            }
            .content{
                .texts2{
                    font-size: 1.2em;
                    font-family: OSBold;
                    text-transform: uppercase;
                    margin-bottom: 0.5em;
                }
                .info2{
                    font-size: 0.8em;
                }
            }
        }
    }

    @media screen and (max-width:600px) {
        padding: 2em 0 2em;
        .subject2{
            font-size: 1.3em;
            line-height: 4em;
            margin-bottom: 5em;
        }

        .list2{
            display: block;
            text-align: left;

            .item2{
                width: 100%;
                display: flex;
                margin-bottom: 2em;

                .thumb2{
                    flex-shrink: 0;
                    margin-right: 2em;
                    width: 7em;
                    height: 7em;
                    border-radius: 10px;
                }
            }
        }
    }
}

// 页面五
.teamthi{
    background-color: #070707;
    text-align: center;
    padding: 0.5em 0em 2em;
    .subject3{
        color: #ffffff;
        background: url("../images/team_title_bg.png") no-repeat center bottom;
        line-height:4em;
        margin-bottom: 2em;
        font-size: 2em;
        font-family: OSLight;

        span{
            font-family: OSBold;
        }
    }
    .detext3{
        margin-bottom: 3.5em;
        img{
            max-width: 8em;
            max-height: 8em;
            margin-right: 1.5em;
        }

    }
    .more2{
        width: 100%;
        text-align: center;
        label{
            display: inline-block;
            width: 0.7em;
            height: 0.7em;
            cursor: pointer;
            background-color: #fff;
            transition: all linear 0.3s;
            &:hover{
                background-color: #fcac45;
            }
        }
    }

    @media screen and(max-width:700px) {
        .subject3{
            font-size: 2.2em;
        }
        .detext3{
            img{
                max-width: 6em;
                max-height: 6em;
                margin-right: 1em;
            }
        }
    }
    @media screen and(max-width:520px) {
        .subject3{
            font-size: 1.2em;
        }
        .detext3{
            img{
                max-width: 4em;
                max-height: 4em;
                margin-right: 0.6em;
            }
        }
    }
}

// 页面六
.teamfour{
    background-color: white;
    padding: 3em 0em 2em;

    .subject4{
        text-align: center;
        color: #070707;
        font-size: 2.5em;
        text-transform: uppercase;
        font-family: OSLight;
        letter-spacing: 2px;
        background: url('../images/team_title_bg.png') no-repeat center bottom;
        line-height:3em;
        margin-bottom: 1em;

        span{
            font-family: OSBold;
        }
    }
    .detext4{
        width: 80%;
        margin: 0 auto;
        font-size: 1em;
        font-family: OSLtalic;
        text-align: center;
        line-height: 1.7em;
        color: #6c6c6c;
        margin-bottom: 5em;
    }
    .box{
        .top{
            display: flex;
            justify-content: space-between;
            align-content: center;
            align-items: center;
            margin-bottom: 1.5em;
            
            .left{
                font-family: OSBold;
                text-transform: uppercase;
                font-size: 1.3em;
            }

            .right{
                display: flex;
                justify-content: space-between;

                a{
                    display: inline-block;
                    font-size: 1.2em;
                    text-transform: capitalize;
                    color: #6c6c6c;
                    border-right: 1px solid #6c6c6c;
                    padding-right: 1em;
                    margin-right: 1em;
                    &:last-child{
                        border-right: 0;
                        margin-right: 0;
                        padding-right: 0;
                    }
                }
            }
            // .cate{
            //     display: none;
            // }
        }
        .list{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            .lang{
                display: flex;
                justify-content: space-between;
                .item{
                    width: 23%;
                    margin-bottom: 2em ;
                    // margin-right: 2em;
                }
            }
        }
        
    }

    @media screen and (max-width:620px) {
        .subject4{
            font-size: 2.5em;
            line-height: 4em;
        }
        .box{
            .top{
                .left{
                    display: none;
                }
            }
        }
    }
    @media screen and (max-width:460px) {
        padding: 2em 0 2em;
        .subject4{
            font-size: 1.2em;
            line-height: 6em;
            margin-bottom: 3em;
        }
        .detext4{
            font-size: 1em;
        }
        .box{
            .top{
                .right{
                    overflow: hidden;
                    a{
                        font-size: 0.8em;
                        padding-right: 0.5em;
                        margin-right:0.5em ;
                        white-space: normal;
                        text-overflow: ellipsis;
                    }
                }
            }
            .list{
                .lang{
                    .item{
                        margin-bottom: 0.5em ;
                    }
                }
            }
        }
        
    }
}

// 页面七
.teamfif{
    background-color: #070707;
    text-align: center;
    padding: 5em 0em 2em;
    input{
        display: none;

    }
    input:checked + .content{
        display: block;
    }
    input[id="client1"]:checked~ .more label:nth-child(1) {
        background-color: #fcac45;
    }
    input[id="client2"]:checked~ .more label:nth-child(2) {
        background-color: #fcac45;
    }
    input[id="client3"]:checked~ .more label:nth-child(3) {
        background-color: #fcac45;
    }


    .subject{
        color: #ffffff;
        font-family: OSBold;
        font-size: 3em;
        text-transform: uppercase;
        background: url("../images/team_title_bg.png") no-repeat center bottom;
        line-height: 4em;
        margin-bottom: 1em;

        span{
            font-family: OSLight;
        }
    }

    .content{
        display: none;
        margin-bottom: 3em;
        .detext{
            color: #e8e8e8;
            font-size: 1.5em;
            font-family: OSLight;
            text-transform: uppercase;
        }
        .text{
            color: #b2b2b2;
            font-size: 1em;
            font-family: OSLight;
            text-transform: capitalize;
        }
    }

    .more{
        width: 100%;
        text-align: center;
        label{
            display: inline-block;
            width: 0.7em;
            height: 0.7em;
            cursor: pointer;
            background-color: #fff;
            transition: all linear 0.3s;
            &:hover{
                background-color: #fcac45;
            }
        }
    }

    @media screen and (max-width:500px) {
        padding: 2em 0em 2em;
        .subject{
            font-size: 1.5em;
            line-height: 5em;
        }
        .content{
            .detext{
                font-size: 1em;
            }
            .text{
                font-size: 0.8em;
            }
        }
    }
}

// 页面八
.teamsix{
    padding: 4em 0em 2em;
    .subject{
        font-size: 4em;
        font-family: OSLight;
        background: url("../images/team_title_bg.png") no-repeat center bottom;
        line-height: 3em;
        margin-bottom: 1em;
        text-align: center;
        span{
            font-family: OSBold;
        }
    }

    .detext{
        width: 80%;
        font-family: OSLtalic;
        font-size: 1em;
        margin: 0 auto;
        line-height: 1.5em;
        margin-bottom: 3em;
    }

    .content{
        width: 80%;
        margin: 0 auto;
        .info{
            display: flex;
            justify-content: space-between;
            .left,.right{
                width: 48%;
                margin-bottom: 2em;
                .top{
                    span{
                        font-size: 1em;
                        color: #636363;
                    }
                    sup{
                        font-size: 0.8em;
                        color: #db0000;
                    }
                }

                .bottom{
                    input{
                        width: 100%;
                        height: 2.5em;
                        line-height: 2.5em;
                        border: 1px solid #636363;
                    }
                }
            }
        }

        .message{
            margin-bottom: 2em;
            .top{
                span{
                    font-size: 1em;
                    color: #636363;
                }
                sup{
                    font-size: 0.8em;
                    color: #db0000;
                }
            }

            .bottom{
                textarea{
                    width: 100%;
                }
            }
        }

        .send{
            text-align: right;
            button{
                width: 9em;
                height: 3em;
                background-color: #fcac45;
                color: #ffffff;
                border: 0px;
                transition: all linear 0.2s;
                &:hover{
                    transform: translateY(-10px);
                    box-shadow: 0px 0px 5px 2px #7b6f5f;
                }
            }
        }
    }

    @media screen and (max-width:420px) {
        padding: 2em 0em 2em;
        .subject{
            font-size: 2em;
        }
        .content{
            .info{
                display: inline-block;
                .left,.right{
                    margin-bottom: 1em;
                    width: 100%;
                }
            }
        }
    }
}

